<template>
	<view class="user-promote-order">
		<view class="tabs">
			<view class="tabs-item" :class="{'active':item.id == currTab.id}" v-for="item in tabList" :key="item.id"
				@click="chageTab(item)">
				{{item.name}}
			</view>
		</view>

		<view class="spread-order">
			<view class="content">
				<view class="order-container">
					<view v-for="(item, index) in lists" :key="item.order_sn" class="order-item bg-white mt20">
						<view class="order-header row-between">
							<view class="muted xs row-center" style="gap: 10rpx;">
								<view>订单编号:{{item.order_sn}}</view>
								<image @tap="toCopy(item.order_sn)" src="../../static/images/copy_icon.png"
									style="width: 30rpx;" mode="widthFix">
								</image>
							</view>
							<view class="row" style="gap:10rpx">
								<view>{{getOrderType(item.type_status)}}</view>
								<view>|</view>
								<view :style="{'color':tagStyle(item)}">{{item.status_name}}</view>
							</view>
						</view>
						<view class="order-content row">
							<view class="order-goods-img">
								<u-image width="100%" height="100%" :src="item.avatar" />
							</view>
							<view class="order-goods-info ml20">
								<view class="row-between">

									<view class="name row bold">{{item.nickname}} <text style="font-size: 10px;margin-left: 10rpx;">{{item.level_name}}</text></view>
									<view class="sm lighter" style="">
										佣金:<text style="color: #FF2C3C;">￥<text
												class="xxl">{{item.yj_money}}</text></text>
									</view>
								</view>
								<view class="row-between">
									<view class="phone-row">
										<image src="/static/images/icon_7.png" mode="widthFix" class="icon1"></image>
										<text class="text">{{item.phone}}</text>
										<image @tap="callPhone(item.phone)" src="/static/images/icon_6.png"
											mode="widthFix" class="icon2"></image>
									</view>
									<view class="">
										{{item.anickname || ""}}
									</view>
								</view>
							</view>
						</view>
						<view class="goods-info-box">
							<view class="content-box">
								<view class="row-between">
									<view class="left row">
										<view class="label">产品：</view>
										<view class="text">{{item.goods_name}}</view>
									</view>
									<view class="right">租期：{{item.goods_info}}</view>
								</view>
								<view class="date">下单时间：{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAgentList,
		getUserCommission
	} from "@/api/user";
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools";
	const _tabList = [{
		name: "全部",
		id: 0,
	}, {
		name: "已结算",
		id: 1,
	}, {
		name: "未结算",
		id: 2,
	}];
	export default {
		data() {
			return {
				tabList: _tabList,
				currTab: _tabList[0],

				selectShow: false, //选择框显示

				loadingStatus: loadingType.LOADING,
				lists: [],
				page: 1,
			};
		},

		components: {

		},
		props: {},
		onReachBottom() {
			this.getDataList();
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getDataList();
		},

		methods: {
			chageTab(tab) {
				if (tab.id != this.currTab.id) {
					this.currTab = tab;
					this.loadingStatus = loadingType.LOADING;
					this.page = 1;
					this.lists = [];
					this.getDataList();
				}
			},
			getDataList() {
				let {
					loadingStatus,
					lists,
					page
				} = this;
				loadingFun(getUserCommission, page, lists, loadingStatus, {
					type: this.currTab.id,
				}).then(res => {
					this.setResult(res);
				})
			},
			setResult(res) {
				if (res) {
					this.page = res.page;
					this.lists = res.dataList
					this.loadingStatus = res.status
				}
			},
			getOrderType(val) {
				switch (val) {
					case 1:
						return '租赁订单';
					case 2:
						return '租售订单';
					case 3:
						return '预约订单';
					default:
						return '';
				}
			},
			callPhone(number) {
				uni.makePhoneCall({
					phoneNumber: number
				})
			},
			toCopy(text) {
				copy(text)
			},
			tagStyle(item) {
				let color = '#000';
				//订单状态:0-待付款;1-待发货/取货/配送;2-待收货;3-租用中;4-已完成;5-已关闭,6归还待确认
				switch (item.order_status) {
					case 0:
					case 1:
					case 2:
					case 3:
					case 6:
						color = '#3187FD';
						break;
					case 4:
						color = '#666';
						break;
					case 5:
						color = '#FF2C3C';
						break;
				}
				return color
			},
		}
	};
</script>
<style lang="scss">
	.tabs {
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: white;

		.tabs-item {
			flex: 1;
			line-height: 80rpx;
			text-align: center;

			.tab-choose {
				display: inline-block;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				max-width: 120rpx;
			}

			&.active {
				color: var(--primary-color);
			}
		}
	}

	@import 'index.scss';
</style>